<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>复选框和单选框</title>
</head>
<body>
<form action="" name="form1">
    <p>Tick all of the components you want included on your computer</p>
    <p>
        <label for="chk-dvd">DVD-ROM
            <input id="chk-dvd" type="checkbox" name="chkDvd" value="DVD-ROW">
        </label>
    </p>
    <p>
        <label for="chk-blu-ray">Blu-ray
            <input id="chk-blu-ray" type="checkbox" name="chkBluRay" value="Blu-ray">
        </label>
    </p>
    <p>Select the processor speed you require</p>
    <p>
        <label for="3.2 GHz">
            <input id="3.2 GHz" type="radio" name="radCpuSpeed" value="3.2 GHz" checked="checked">3.2 GHz
        </label>
        <label for="3.7 GHz">
            <input id="3.7 GHz" type="radio" name="radCpuSpeed" value="3.7 GHz">3.7 GHz
        </label>
        <label for="4.0 GHz">
            <input id="4.0 GHz" type="radio" name="radCpuSpeed" value="4.0 Ghz">4.0 GHz
        </label>
    </p>
    <input type="button" name="btnCheck" value="Check form">
</form>
<script>
    var myForm = document.form1;

    function getSelectedSpeedValue() {
        var radios = myForm.radCpuSpeed;
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                return radios[i].value;
            }
        }
        return '';
    }

    function findIndexOfSpeed(radio) {
        var radios = myForm.radCpuSpeed;
        for (var i = 0; i < radios.length; i++) {
            if (radios[i] == radio) {
                return i;
            }
        }
        return -1;
    }

    function radCpuSpeedClick(e) {
        var i = findIndexOfSpeed(e.target);
        if (i == 1) {
            e.preventDefault();
            alert('Sorry than processor speed is currently unavailable');
            myForm.radCpuSpeed[0].checked = true;
        }
    }

    function btnCheckClick() {
        var numberOfControls = myForm.length;
        var compSpec = 'Your chosen processor speed is ';
        compSpec += getSelectedSpeedValue();
        compSpec += '\nWith the following additional components:\n';

        for (var i = 0; i < numberOfControls; i++) {
            var element = myForm[i];
            if (element.type == 'checkbox' && element.checked) {
                compSpec += element.value + '\n';
            }
        }
        alert(compSpec);
    }

    for (var i = 0; i < myForm.radCpuSpeed.length; i++) {
        myForm.radCpuSpeed[i].addEventListener('click', radCpuSpeedClick);
    }
    myForm.btnCheck.addEventListener('click', btnCheckClick);
</script>
</body>
</html>